<template>
  <div id="app">
    <!-- Header 和 Footer 不要用小写是为了与原生 html 区别开来 -->
    <Header id="header"></Header>
    <main id="main">
      <router-view/>
    </main>
    <Footer id="footer"></Footer>
  </div>
</template>

<script>
  import Header from "@/components/header.vue";
  import Footer from "@/components/footer.vue";

  export default {
    name: "App",
    components: {
      // ES6 语法 相当于 Header：Header
      Header,
      Footer
    }
  };
</script>

<style lang="less">
  @import "./assets/common.less";

  #app {
    display: grid;
    grid-template-columns: 12% auto 12%;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header" ". main ." "footer footer footer";

    #header {
      grid-area: header;
      padding-left: 12%;
      padding-right: 12%;
    }

    #main {
      grid-area: main;
    }

    #footer {
      grid-area: footer;
      padding-left: 12%;
      padding-right: 12%;
    }
  }

  @media (max-width: 768px) {
    #app {
      grid-template-columns: 10px auto 0;
      #main{
        padding: 0;
      }
      #header,
      #footer {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
</style>
